<template>
  <div class="tp-body">
      <!-- banner -->
    <WidgetsStatsA />
    <!-- project backgroud -->
    <CRow class="project-backgroud">
        <!-- 1 -->
        <CCol  :xl="6" style="margin-bottom: 2rem;">
            <div class="title">
                <strong>LaunchPad</strong>
            </div>
            <CRow class="jgme-card">
              <CCol class="img-logo" sm="4" :lg="4">
                <img class="d-block" :src="gameImg" alt="slide 3" />
              </CCol>
              <CCol  sm="8" :lg="8">
                <div class="text">
                  JGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGames
                </div>
                <CButton class="info-btn" color="info" shape="rounded-pill">
                  {{ i18n.t('header.btn3') }}
                </CButton>
              </CCol>
            </CRow>
        </CCol>
        <!-- 2 -->
        <CCol  :xl="6" style="margin-bottom: 2rem;">
            <div class="title">
                <strong>Join Our Community</strong>
            </div>
            <CRow class="jgme-card">
              <CCol class="img-logo" :xl="4">
                <img class="d-block" :src="gameImg" alt="slide 3" />
              </CCol>
              <CCol  sm="8" :lg="8">
                <div class="text">
                  JGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGames
                </div>
                <CButton class="info-btn" color="info" shape="rounded-pill">
                  {{ i18n.t('header.btn3') }}
                </CButton>
              </CCol>
            </CRow>
        </CCol>
    </CRow>
     <!-- Games -->
    <CRow class="Games">
        <div class="title">
            <strong>Games</strong>
        </div>
        <!-- 1 -->
        <CCol :sm="4" :lg="4" >
          <CCol class="img-logo">
            <img :src="gameImg" alt="slide 3" />
          </CCol>
        </CCol>
        <!-- 2 -->
        <CCol :sm="4" :lg="4" >
          <CCol class="img-logo" sm="4" :lg="4">
            <img :src="gameImg" alt="slide 3" />
          </CCol>
        </CCol>
        <!-- 3 -->
        <CCol :sm="4" :lg="4" >
          <CCol class="img-logo" sm="4" :lg="4">
            <img :src="gameImg" alt="slide 3" />
          </CCol>
        </CCol>
    </CRow>
     <!-- Latest Auction -->
    <CRow class="LatestAuction">
        <div class="title">
            <strong>Latest Auction</strong>
        </div>
        <!-- 1 -->
        <CCol :sm="5" :md='6' :lg="6" :xl='3'>
          <div class="card">
            <div class="img-logo" style="background-image: linear-gradient(to bottom, #f7e4e6, #ffcede);">
              <img :src="jbImg" alt="slide 3" />
              <div class="img-title">
                <strong>Gold Bagde(#1518)</strong>
              </div>
            </div>
            <div class="text-body">
              <div class="text">
                Latest Big<span>699M</span>
              </div>
              <div class="text">
                Countdown Big<span>21:10:03</span>
              </div>
            </div>
          </div>
        </CCol>
        <!-- 2 -->
        <CCol :sm="5" :md='6' :lg="6" :xl='3'>
          <div class="card" style="background:#fffcf2">
            <div class="img-logo" style="background-image: linear-gradient(to bottom, #fff8e0, #ffefc4);">
              <img :src="jbImg" alt="slide 3" />
              <div class="img-title">
                <strong>Gold Bagde(#1518)</strong>
              </div>
            </div>
            <div class="text-body">
              <div class="text">
                Latest Big<span>699M</span>
              </div>
              <div class="text">
                Countdown Big<span>21:10:03</span>
              </div>
            </div>
          </div>
        </CCol>
        <!-- 3 -->
        <CCol :sm="5" :md='6' :lg="6" :xl='3'>
          <div class="card" style="background:#fffcf2">
            <div class="img-logo" style="background-image: linear-gradient(to bottom, #fff8e0, #ffefc4);">
              <img :src="jbImg" alt="slide 3" />
              <div class="img-title">
                <strong>Gold Bagde(#1518)</strong>
              </div>
            </div>
            <div class="text-body">
              <div class="text">
                Latest Big<span>699M</span>
              </div>
              <div class="text">
                Countdown Big<span>21:10:03</span>
              </div>
            </div>
          </div>
        </CCol>
        <!-- 4 -->
        <CCol :sm="5" :md='6' :lg="6" :xl='3'>
          <div class="card" style="background:#fcfbf7">
            <div class="img-logo" style="background-image: linear-gradient(to bottom, #f8f5ed, #f3ebd9);">
              <img :src="jbImg" alt="slide 3" />
              <div class="img-title">
                <strong>Gold Bagde(#1518)</strong>
              </div>
            </div>
            <div class="text-body">
              <div class="text">
                Latest Big<span>699M</span>
              </div>
              <div class="text">
                Countdown Big<span>21:10:03</span>
              </div>
            </div>
          </div>
        </CCol>
    </CRow>
     <!-- Latest Sale -->
    <CRow class="LatestAuction">
        <div class="title">
            <strong>Latest Sale</strong>
        </div>
        <!-- 1 -->
        <CCol :sm="6" :md='6' :lg="6" :xl='3'>
          <div class="card" style="background:#fffcf2">
            <div class="img-logo" style="background-image: linear-gradient(to bottom, #fff8e0, #ffefc4);">
              <img :src="jbImg" alt="slide 3" />
              <div class="img-title">
                <strong>Gold Bagde(#1518)</strong>
              </div>
            </div>
            <div class="text-body">
              <div class="text">
                Latest Big<span>699M</span>
              </div>
              <div class="text">
                Countdown Big<span>21:10:03</span>
              </div>
            </div>
          </div>
        </CCol>
        <!-- 2 -->
        <CCol :sm="5" :md='6' :lg="6" :xl='3'>
          <div class="card" style="background:#f2fcff">
            <div class="img-logo" style="background-image: linear-gradient(to bottom, #e1f6ff, #c4ecff);">
              <img :src="jbImg" alt="slide 3" />
              <div class="img-title">
                <strong>Gold Bagde(#1518)</strong>
              </div>
            </div>
            <div class="text-body">
              <div class="text">
                Latest Big<span>699M</span>
              </div>
              <div class="text">
                Countdown Big<span>21:10:03</span>
              </div>
            </div>
          </div>
        </CCol>
        <!-- 3 -->
        <CCol :sm="5" :md='6' :lg="6" :xl='3'>
          <div class="card" style="background:#fafdf5">
            <div class="img-logo" style="background-image: linear-gradient(to bottom, #f4fbe6, #eaf8d1);">
              <img :src="jbImg" alt="slide 3" />
              <div class="img-title">
                <strong>Gold Bagde(#1518)</strong>
              </div>
            </div>
            <div class="text-body">
              <div class="text">
                Latest Big<span>699M</span>
              </div>
              <div class="text">
                Countdown Big<span>21:10:03</span>
              </div>
            </div>
          </div>
        </CCol>
        <!-- 4 -->
        <CCol :sm="5" :md='6' :lg="6" :xl='3'>
          <div class="card" style="background:#fcfbf7">
            <div class="img-logo" style="background-image: linear-gradient(to bottom, #f8f5ed, #f3ebd9);">
              <img :src="jbImg" alt="slide 3" />
              <div class="img-title">
                <strong>Gold Bagde(#1518)</strong>
              </div>
            </div>
            <div class="text-body">
              <div class="text">
                Latest Big<span>699M</span>
              </div>
              <div class="text">
                Countdown Big<span>21:10:03</span>
              </div>
            </div>
          </div>
        </CCol>
    </CRow>
  </div>
</template>

<script>
import WidgetsStatsA from '../widgets/WidgetsStatsTypeA.vue'
import { useI18n } from 'vue-i18n'
import  gameImg  from '@/assets/images/home/gameImg.png'
import  jbImg  from '@/assets/images/home/jb.png'

export default {
  name: 'Dashboard',
  components: {
    WidgetsStatsA,
  },
  setup() {
    const i18n = useI18n()
    return {
        i18n,
        gameImg,
        jbImg
    }
  },
}
</script>

<style scoped lang="scss">
@import "~@/styles/custom";
.tp-body {

  .project-backgroud {
    text-align: center;
    padding: 5%;
    .title {
      text-align: left;
      color: #000;
      font-size: 1.2rem;
      margin-bottom: 0.5rem;
    }
    .jgme-card {
      margin: auto;
      display: flex;
      border-radius: 1rem;
      -webkit-box-shadow: 0 3px 9px #cfdef7f1;
      box-shadow: 0 3px 9px #cfdef7f1;
      text-align: left;
      padding: 1.5rem;
      background: #fff;
      .img-logo {
        border-radius: 1rem;
        overflow: hidden;
        padding: 0;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .text {
        padding-top: 0.5rem;
        max-height: 8rem;
        overflow: hidden;
        color: #000;
        word-wrap: break-word;
      }
      .info-btn {
        margin-top: 10%;
        padding: 0.2rem 0.5rem;
        min-width: 6rem;
        font-size: 0.8rem;
        border: none;
        color: #fff;
        background-image: linear-gradient(to right, #6496e6, #a1ddf5);
      }
    }
  }

  .title {
    text-align: left;
    color: #000;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
  }

  .Games {
    .img-logo {
      -webkit-box-shadow: 0 3px 9px #cfdef7f1;
      box-shadow: 0 3px 9px #cfdef7f1;
      margin-bottom: 1rem;
      border-radius: 1rem;
      overflow: hidden;
      width: 100%;
      padding: 0;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .LatestAuction {
    .card{
      border-radius: 1rem;
      border:none;
      background: rgba(250, 231, 231, 0.692);
      margin-bottom: 1rem;
      .img-logo {
        background-image: linear-gradient(to bottom, #ffcede, #f7e4e6);
        -webkit-box-shadow: 0 3px 9px #cfdef7f1;
        box-shadow: 0 3px 9px #cfdef7f1;
        margin-bottom: 1rem;
        border-radius: 1rem;
        overflow: hidden;
        width: 100%;
        padding: 0;
        text-align: center;
        padding-top: 5rem;
        img {
          width: 50%;
          height: 50%;
        }
        .img-title{
          padding: 1rem 0;
        }
      }
      .text-body{
        padding: .5rem;
        .text{
          width: 100%;
          span{
            float: right;
          }
        }
      }
    }
  }
}
</style>
